<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>失物招领中心</title>
    <link rel="shortcut icon" href="/static/imag/favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" href="/static/css/body.css">
    <style>
        /* 失物招领区 */
        .lost-and-found {
            margin-top: 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .item-card {
            background-color: #444f61;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            position: relative;
            /* 为按钮定位 */
        }

        .item-card img {
            max-width: 100%;
            border-radius: 5px;
        }

        .item-description {
            margin-top: 10px;
            color: #ff6b6b;
        }

        .item-name {
            font-weight: bold;
            font-size: 1.1em;
        }

        .delete-button {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #ff4757;
            border: none;
            border-radius: 5px;
            color: #fff;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 0.8em;
            transition: background-color 0.3s;
        }

        .delete-button:hover {
            background-color: #ff6b6b;
        }

        /* 新增物品按钮 */
        .add-item-button {
            position: fixed;
            bottom: 60px;
            /* 将按钮上移以避免与底部版权信息重叠 */
            right: 20px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s;
        }

        .add-item-button:hover {
            background-color: #218838;
        }

        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            width: 400px;
            text-align: center;
        }

        .modal-content input,
        .modal-content button {
            margin: 10px 0;
        }

        .required:after {
            content: "*";
            color: red;
            margin-left: 5px;
        }

        .item-card .item-description .item-introduction-popup {
            display: none;
            position: absolute;
            top: 70px;
            right: 20px;
            background-color: var(--sidebar-bg-color);
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            z-index: 1000;
            color: #fff;
        }

        .item-card:hover .item-description .item-introduction-popup {
            display: block;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <h2>导航栏</h2>
            <a href="#" onclick="go_back()">返回首页</a>
            <a href="#" onclick="open_win()">窗户状态</a>
            <a href="#" onclick="open_msg()">通知中心</a>
            <a href="#" onclick="open_ai_chat()">ai聊天</a>
            <a href="#" onclick="open_audio()">语音提醒</a>
            <a href="#" onclick="open_lost_and_found()">失物招领中心</a>
            <a href="#" onclick="open_car_video()">小车视频</a>
        </div>
        <!-- 主内容区 -->
        <div class="main-content">
            <div class="header">
                <img src="./static/imag/logo.png" alt="Logo" class="logo" title="点击切换主题" id="logo_switchTheme">
                <h1>失物招领中心</h1>
                <div class="user-info">
                    <img src="./static/imag/adm.jpg" alt="User Avatar">
                    <div class="invite-code-popup">
                        用户: {{.username}}<br>邀请码: {{.invitecode}}(禁止外传)
                    </div>
                    <div class="username">用户: {{.username}}</div>
                    <button class="logout-button" onclick="logout()">退出登录</button>
                </div>
            </div>
            <!-- 失物招领内容 -->
            <div class="lost-and-found">
                {{range .lost_items}}
                <div class="item-card">
                    <img src="/lost_found_pic?filename={{.Image_url}}" alt="{{.Image_url}}">
                    <!-- <button class="delete-button">删除</button> -->
                    <div class="item-description">
                        <div class="item-name">{{.Item_name}}</div>
                        <div>捡到人: {{.Found_name}}</div>
                        <div>时间: {{.Found_time}}</div>
                        <div class="item-introduction-popup">
                            描述信息: {{.Intruduction}}
                        </div>
                    </div>
                </div>
                {{end}}
            </div>

            <!-- 新增物品按钮 -->
            <button class="add-item-button" onclick="openModal()">新增物品</button>

            <!-- 弹窗 -->
            <div class="modal" id="itemModal" style="color: #000;" id="myModal">
                <div class="modal-content">
                    <h2 style="color: #444f61;">新增物品</h2>
                    <input type="file" id="itemImage" accept="image/*" required onchange="previewImage(event)"
                        required><br>
                    <img id="preview" src="#" alt="图片预览" style="display:none;max-width: 100%;height: auto; " />
                    <input type="text" id="itemName" placeholder="物品名称" required><br>
                    <input type="name" id="found_person_name" placeholder="捡拾者姓名" style="margin-bottom: 0px;"><br>
                    <p style="font-size: 12px; color: rgb(0, 0, 0); margin-top: 0px;">捡拾者姓名可空，填写学生姓名可统计并且有奖励哦！</p>
                    <input type="text" id="itemDescription" placeholder="描述信息" style="margin-bottom: 0px;" required><br>
                    <p style="font-size: 12px; color: crimson; margin-top: 0px;">包括：捡到地点、领取位置等，请详细填写，方便失主寻回。</p>
                    <input type="date" id="itemDate" placeholder="捡到日期" required>
                    <input type="time" id="itemTime" placeholder="具体时间" required><br>
                    <button onclick="addItem()">提交</button>
                    <button onclick="closeModal()">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部版权信息 -->
    <div class="footer">
        多模态智能校园管理平台
    </div>
    <script src="/static/js/route.js"></script>
    <script src="/static/js/lost_found.js"></script>
</body>

</html>